<template>
  <div class="page">
    <div class="inner">
      <div class="logo">
        <img src="@/assets/images/logo.png" alt="" />
      </div>

      <div class="login_box">
        <div class="left_box">
          <img src="@/assets/images/login_img.png" alt="" />
        </div>
        <div class="right_box">
          <div class="title"><span>Hello！</span>欢迎登录哩哩风铃</div>
          <el-form
            ref="loginForm"
            :rules="rules"
            :model="formLogin"
            label-width="0"
          >
            <div class="login">
              <el-form-item prop="userName">
                <el-input
                  type="text"
                  prefix-icon="el-icon-user"
                  v-model="formLogin.userName"
                  clearable
                  autocomplete="new-password"
                  class="a_input"
                  placeholder="请输入账号"
                ></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  type="password"
                  prefix-icon="el-icon-lock"
                  v-model="formLogin.password"
                  clearable
                  autocomplete="new-password"
                  class="a_input"
                  placeholder="请输入账号"
                ></el-input>
              </el-form-item>
              <div class="input_box btn_box">
                <button class="btn" @click.prevent="submit" :loading="loading">
                  登录
                </button>
              </div>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { USERCAPTCHA, REQUEST_LOGIN } from "@/http/interface";
import store from "@/store";
export default {
  components: {},
  data() {
    return {
      // 表单
      formLogin: {
        //account:'18682185879'
      },
      loading: false,
      rules: {
        userName: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      captcha: "",
    };
  },
  mounted() {
    console.log(this.createToken());
  },
  methods: {
    // 提交登录信息
    submit() {
      let _this = this;
      let oParams = this.formLogin;
      this.loading = true;
      this.$refs.loginForm.validate((valid) => {
        if (!valid) {
          this.loading = false;
          return false;
        }
        REQUEST_LOGIN(oParams)
          .then((res) => {
            _this.loading = false;
            if (res.code == 200) {
              let obj = res.data;
              let token = _this.createToken();
              sessionStorage.setItem("user", JSON.stringify(obj.user));
              sessionStorage.setItem("token", token);
              _this.$router.push({ path: "/applet" });
            }
          })
          .catch((error) => {
            _this.loading = false;
          });
      });
    },

    // 生成token
    createToken() {
      let token = "";
      let tokenLength = 64;
      let possibleChars =
        "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
      for (let i = 0; i < tokenLength; i++) {
        token += possibleChars.charAt(
          Math.floor(Math.random() * possibleChars.length)
        );
      }
      console.log(token);
      return token;
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(202deg, #167fff, #16a5ff);
  .inner {
    position: relative;
    width: 960px;
    margin: 0 auto;
    height: 100vh;
    .logo {
      margin-top: 40px;
      // width: 60px;
      height: 60px;
      img {
        // width: 100%;
        height: 100%;
      }
    }
    .login_box {
      display: flex;
      margin-top: 134px;
      .left_box {
        flex: 1;
        padding-right: 84px;
        img {
          width: 476px;
        }
      }
      .right_box {
        width: 400px;
        height: 400px;
        background: #ffffff;
        border-radius: 10px;
        .title {
          font-size: 20px;
          font-size: PingFang-SC-Regular;
          color: #167fff;
          line-height: 28px;
          text-align: center;
          margin: 53px 0 0 0;
          span {
            font-family: Arial;
            font-weight: bold;
          }
        }
        .login {
          padding: 0 40px;
          margin-top: 18px;
          .a_input {
            height: 49px;
            flex: 1;
            border: 0;
            outline: none;
            font-size: 14px;
            color: #333;
            font-size: PingFang-SC-Regular;
            .el-input__inner {
              height: 49px;
            }
          }
          .input_box {
            height: 49px;
            background: #ffffff;
            border: 1px solid #e2e3e5;
            border-radius: 4px;
            display: flex;
            align-items: center;
            padding: 0 0 0 24px;
            // margin: 30px 0;
            box-sizing: border-box;
            i {
              margin: 0 16px 0 0;
              font-size: 20px;
              color: #e2e3e5;
            }
            .a_input {
              height: 49px;
              flex: 1;
              border: 0;
              outline: none;
              font-size: 14px;
              color: #333;
              font-size: PingFang-SC-Regular;
            }
          }
          .btn_box {
            border: 0;
            padding: 0;
            margin: 30px 0 0 0;
            .btn {
              flex: 1;
              height: 48px;
              background: #167fff;
              border-radius: 4px;
              border: 0;
              font-size: 14px;
              font-family: PingFang SC;
              font-weight: 400;
              color: #ffffff;
              cursor: pointer;
            }
            .btn:hover {
              opacity: 0.8;
            }
          }
        }
      }
    }
  }
}
</style>
<style lang="scss">
.login_box {
  .a_input {
    height: 49px;
    flex: 1;
    border: 0;
    outline: none;
    font-size: 14px;
    color: #333;
    font-size: PingFang-SC-Regular;
    .el-input__inner {
      height: 49px;
      padding-left: 46px;
    }
    .el-input__prefix {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 16px 0 10px;
      font-size: 20px;
      color: #e2e3e5;
    }
  }
}
</style>
